<template>
  <div class="chart_center2">
    <div class="chart_center2-title">业务量统计</div>
    <div id="chart_center2" />
  </div>
</template>

<script>
const echarts = require('echarts')
import Sever from '@/api/selfApi'
export default {
  props: {
    dep_code: {
      type: String,
      default: '450000-00-0000',
      require: true
    }
  },
  data() {
    return {
      depcode: '450000-00-0000',
      xLabel: [
        '2021-02',
        '2021-03',
        '2021-04',
        '2021-05',
        '2021-06',
        '2021-07',
        '2021-08',
        '2021-09',
        '2021-10',
        '2021-11',
        '2021-12',
        '2022-01'
      ],
      goToSchool: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
      option: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(126,199,255,0)' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(126,199,255,1)' // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(126,199,255,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        },

        grid: {
          top: '2%',
          left: '1%',
          right: '3%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              // 坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: '#233653'
              }
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              textStyle: {
                color: '#7ec7ff',
                padding: 16,
                fontSize: 10
              },
              formatter: function(data) {
                return data
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#192a44'
              }
            },
            axisTick: {
              show: false
            },
            data: []
          }
        ],
        yAxis: [
          {
            nameTextStyle: {
              color: '#7ec7ff',
              fontSize: 12,
              padding: 2
            },
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#192a44'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#233653'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#7ec7ff',
                padding: 2
              },
              formatter: function(value) {
                if (value === 0) {
                  return value
                }
                return value
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '业务量',
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              normal: {
                width: 5,
                color: 'rgba(25,163,223,1)' // 线条颜色
              },
              borderColor: 'rgba(0,0,0,.4)'
            },
            itemStyle: {
              color: 'rgba(25,163,223,1)',
              borderColor: '#646ace',
              borderWidth: 2
            },
            tooltip: {
              show: true
            },
            areaStyle: {
              // 区域填充样式
              normal: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(25,163,223,.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(25,163,223, 0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(25,163,223, 0.9)', // 阴影颜色
                shadowBlur: 5 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              }
            },
            data: []
          }
        ]
      }
    }
  },

  watch: {
    dep_code(newValue, oldValue) {
      if (newValue) {
        (this.depcode = newValue), this.getYwltj()
      }
    }
  },
  destroyed() {
    window.onresize = null
  },
  mounted() {
    // this.getYwltj()
  },
  methods: {
    async getYwltj() {
      try {
        // 请求后台接口
        const res = await Sever.analyse.getYwltj({
          // 请求参数
          dep_code: this.depcode
        })
        if (res.length == 0) {
          // 初始化data中的数值
          Object.assign(this.$data, this.$options.data())
          this.option.xAxis[0].data = this.xLabel
          this.option.series[0].data = this.goToSchool
        } else {
          this.option.xAxis[0].data = res[0]
          this.xLabel = res[0]
          this.option.series[0].data = res[1]
        }
        this.drawPie()
      } catch (error) {
        console.log(error)
        Object.assign(this.$data, this.$options.data())
        this.option.xAxis[0].data = this.xLabel
        this.option.series[0].data = this.goToSchool
        this.drawPie()
      }
    },

    drawPie() {
      const myChartPiechart_center2 = echarts.init(
        document.getElementById('chart_center2')
      )
      myChartPiechart_center2.clear()

      let len = 0
      setInterval(() => {
        if (len === this.xLabel.length) {
          len = 0
        }
        myChartPiechart_center2.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: len
        })
        len++
      }, 3000)

      myChartPiechart_center2.setOption(this.option)
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener(
        'resize',
        () => myChartPiechart_center2.resize(),
        false
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.chart_center2 {
  width: 100%;
  height: 32%;
  box-sizing: border-box;
  margin-bottom: 20px;
  // background-color: rgba(255, 255, 255, 0.03);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  display: flex;
  flex-direction: column;

  .chart_center2-title {
    font-weight: bold;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }

  #chart_center2 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
